.modal-open{
    overflow: hidden;
}
.modal {
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    -webkit-overflow-scrolling: touch;
    &.modal-background{
        background-color:rgba(0, 0, 0, .6);;
    }
    .modal-content {
        position: absolute;
        border-color: @border-color solid 1px;
        box-shadow: 0 0px 3px #444;
        background: #fff; 
        z-index: 10;
        left: 50%;
        top: 30%;
        border-radius: @panel-radius;
        .transform(translateX(-50%) scale(1));
    }
    .title{
        height: 26px;
        line-height: 26px;
        padding-left: 10px;
        background-color: #d5d5d5;
        border-bottom: 1px solid @btn-default-border;
        border-top-left-radius: @panel-radius;
        border-top-right-radius: @panel-radius;
    }
    .closeIcon {
        position: absolute;
        right: 2px;
        top: 2px;
        text-decoration: none;
        color: #444;
    }
    &.nomal {
        .modal-content {
            width: 500px;
        }
    }
    &.large {
        .modal-content {
            width: 900px;
        }
    }
    &.samll {
        .modal-content {
            width: 300px;
        }
    }
}

.modal-transiton-enter {
    opacity: 0.01;
    .modal-content {
        .transition(opacity .3s);
        .transform(translateX(-50%) scale(.1));
    }
}

.modal-transiton-enter.modal-transiton-enter-active {
    opacity: 1;
    .transition(opacity .3s);
    .modal-content {
        transition: transform .3s;
        .transform(translateX(-50%) scale(1));
    }
}

.modal-transiton-leave {
    opacity: 1;
}

.modal-transiton-leave.modal-transiton-leave-active {
    opacity: 0.01;
    .transition(opacity .3s);
}